<template>
  <div>
    <van-nav-bar :title="title" fixed>
      <template #left v-if="$route.path!=='/'">
        <img src="~/assets/back.png" @click="handleBack"/>
      </template>
      <template #right>
        <img src="~/assets/click.png" @click="show=true"/>
      </template>
    </van-nav-bar>
    <van-popup v-model="show" position="right" class="popup">
      <ul>
        <li v-for="item in list" :key="item.text">
          <nuxt-link :to="item.url">{{item.text}}</nuxt-link>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: "van-header",
    props: {
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        show: false,
        list: [
          {
            text: '首页',
            url: '/'
          },
          {
            text: '公司注册',
            url: '/companyRegistry'
          },
          {
            text: '代理记账',
            url: '/agentBookKeep'
          },
          {
            text: '公司注销',
            url: '/companyCancel'
          },
          {
            text: '建筑资质',
            url: '/constructionQualification'
          }
        ]
      }
    },
    methods: {
      handleBack() {
        this.$router.back()
      }
    }
  }
</script>

<style lang="less">
  .van-nav-bar__title {
    font-size: 17px;
    font-weight: 400;
    color: #FFFFFF;
  }

  .van-nav-bar {
    background: linear-gradient(0deg, #D52327, #DE0303);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.11);

    img {
      width: 21px;
    }
  }

  .popup {
    top: 0;
    bottom: 0;
    transform: translate(0, 0);
    width: 50%;

    ul {
      height: 100%;

      li {
        text-align: center;
        line-height: 30px;
      }

      a {
        color: #000;
        font-size: 12px;
      }
    }
  }
</style>
